<template>
    <div class="warp">
        <div class="content">

            <el-row class="form-query-box">
                <el-col :span="19" class="form-query">
                    <el-form ref="form" :model="formQuery" size="mini">
                        <el-col :span="6">
                            <el-form-item label="姓名：" label-width="80px">
                                <el-input size="mini" v-model="formQuery.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="领域：" label-width="80px">
                                <el-input v-model="formQuery.category"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="岗位：" label-width="80px">
                                <el-input v-model="formQuery.categoryType"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="职称：" label-width="80px">
                                <el-input size="mini" v-model="formQuery.technologyCategory"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-col>
                <div class="query-bar-left pp">
                    <!--                    <el-upload ref="upload" action="doUpload" :limit="1" :file-list="fileList" :before-upload="beforeUpload">                                      -->
                    <!--                        <el-button type="primary" size="small"  round>批量导入</el-button>-->
                    <!--                    </el-upload>-->
                    <!--                    :file-list.sync="AttachList"-->
                    <el-upload ref="upload" action="doUpload" :limit="1" :file-list="fileList" :before-upload="beforeUpload">
                        <el-button type="primary" size="small"  round>批量导入</el-button>
                    </el-upload>
                </div>
                <div class="query-bar">
                    <el-button type="primary" size="small" @click="queryData()" round>查询</el-button>
                </div>
            </el-row>
            <div class="refresh-bar">
                <p @click="handleTableRefresh">刷新</p>
            </div>
            <!--成员信息存在疑问弹窗-->
            <el-dialog
                    title="错误提示"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    class="yiwen"
                    center>
                <p class="red">*此次导入有以下成员信息存在疑问！</p>
                <div v-for="(item,index) in errmess" :key="index">
                    <div class="blname">{{item.name}}</div>
                    <el-row class="detal" style="font-size: 14px;">
                        <el-col :span="12" class="meiyi" v-for="(v,i) in item.attr" :key="i">
                            {{v}}: <span class="lred">有误</span>
                        </el-col>
                    </el-row>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
              </span>
            </el-dialog>
            <!-- 信息未识别弹窗-->
            <el-dialog
                    title="错误提示"
                    :visible.sync="centerVisible"
                    width="30%"
                    center>
                <p class="red">*此次导入有以下成员信息未识别！</p>

                <div style="padding:10px 20px;" class="linall">
                    <span v-for="(item,index) in errtwss" :key="index" class="blon line">
                        {{item}}
                    </span>
                </div>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="download">下 载</el-button>
                    <el-button type="primary" @click="centerVisible = false">确 定</el-button>
                  </span>


            </el-dialog>

            <div class="content-table">
                <el-table
                        :data="tableData"
                        border
                        size="small"
                        style="width: 100%"
                        header-row-class-name="table-header">
                    <el-table-column
                            prop="name"
                            label="姓名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="category"
                            label="领域"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="categoryType"
                            label="岗位"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="technologyCategory"
                            label="职称"
                            align="center">
                    </el-table-column>

                    <!-- <el-table-column
                           prop="details"
                           label="审核详情(管理员可见)"
                           align="center">
                            <template>
                               <el-checkbox-group v-model="checkList">
                                   <el-checkbox label="教务" ></el-checkbox>
                                   <el-checkbox label="科研" ></el-checkbox>
                                   <el-checkbox label="教保" ></el-checkbox>
                                   <el-checkbox label="职工" disabled></el-checkbox>
                               </el-checkbox-group>
                            </template>
                   </el-table-column>

                    <el-table-column
                           prop="status"
                           label="审核状态"
                           align="center">
                           <template slot-scope="scope">
                               <el-button @click.stop="detailClick(scope.row)" type="text" size="small">待审核</el-button>
                           </template>
                   </el-table-column> -->

                    <el-table-column
                            label="操作"
                            align="center">
                        <template slot-scope="scope">
                            <el-button @click.stop="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total,prev, pager, next"
                        :total="total"
                        :current-page.sync="pageNum"
                        @current-change="handleCurrentPage">
                </el-pagination>

            </div>
        </div>
        <div class="aside-fr">
            <h6 class="moduleName">实际工作单位</h6>
            <div v-for="(item,i) in asideNav" :key="i"
                 @click="handleAsideActive(i,item.name)"
                 :class="{active:i == asideIndex}">
                {{item.name}}
            </div>
        </div>

        <!-- 信息预览 -->
        <base-info-preview ref="infoPreview" class="infoPreview" :userName="userName" :userId="userId"></base-info-preview>

    </div>
</template>

<script>
    import { findListByType,qaStandardRecordFindList,qaStandardRecordFindDetails,qaStandardRecordUploadPost,downloadrenyaun } from '@/service/api'
    import { infoProcessing } from '../../service/personalInfoDataProcessing'
    import Qs from 'qs'

    export default {
        name: "personnelInfo",

        data() {
            return {
                formQuery: {
                    category: '',          // 领域
                    categoryType: '',      // 岗位
                    name: '',              // 姓名
                    technologyCategory: '' // 职称
                },
                // 工作单位
                asideNav: [{name:'全部'}],
                asideIndex: 0,
                asideNameActive:"", // 当前选中

                total:0,
                totalPages:0,
                pageNum:1,
                tableData:[],
                allFieldList:[],

                userName:'',
                checkList: ['教务','科研','教保'],
                userId:'',
                fileList: [],
                files:'',
                fileName:'',

                AttachList:[],
                disabled:false,
                centerDialogVisible:false,
                centerVisible:false,
                errmess:[{
                    name:'张三',
                    attr:[{type: "1", text: "不限", active: false},
                        {type: "1", text: "不限", active: false},
                        {type: "1", text: "不限", active: false},]
                },
                    {
                        name:'李四',
                        attr:[{type: "1", text: "不限", active: false},
                            {type: "1", text: "不限", active: false},
                            {type: "1", text: "不限", active: false},
                        ]
                    }],
                errtwss:['张三','张三','张三','张三','张三','张三','张三'],
                url:'',
            }
        },
        created() {
            this.getFindListByType();
            this.getQaStandardRecordFindList();
            this.test()
        },
        methods:{
            test(){
                let ttt=".linall span:nth-child(1)"
                console.log("&&&",document.querySelector(".linall"),document.querySelector(ttt))
                // document.querySelector(ss).style.backgroundColor="#F5F8FD"
                let round=0
                let n=1
                let ss
                let count
                for(;round<=this.errtwss.length/3;){
                    if(round%2==0){
                        for(n=1;n<=3;n++){
                            count=round*3+n
                            if(count<=this.errtwss.length){
                                ss=".linall span:nth-child("+count+")"
                                let rr=".linall span:nth-child(1)"
                                console.log("###",round*3+n,document.querySelector(ss),document.querySelector(rr))
                                document.querySelector(ss).style.backgroundColor="red"
                            }

                        }
                        round++
                    }else{
                        for(n=1;n<=3;n++){
                            count=round*3+n
                            if(count<=this.errtwss.length){
                                ss=".linall span:nth-child("+(round*3+n)+")"
                                document.querySelector(ss).style.backgroundColor="#ffffff"
                            }

                        }
                        round++
                    }
                }
            },
            download(){
                // this.centerVisible = false
                this.buttonLoading=true;
                const h = this.$createElement;
                var openNotify = this.$notify({
                    type: 'info',
                    title: '文件生成中',
                    //新版本可以识别html代码，升级版本后可打开注释
                    dangerouslyUseHTMLString: true,
                    message:'<div class="progress-bar"></div><div><p style="color:teal">正在导出，请耐心等待</p></div>',
                    // showClose:false,
                    /* message:h('div', [
                        h('p',{style: 'color: teal'}, '正在导出，请耐心等待 '),
                     ]),*/
                    duration: 0
                });
                // var year =formatDate(this.currentYear.year,'yyyy');
                // var month = formatDate(this.currentYear.year,'MM');



                /*    downloadrenyaun(param).then(response=>{
                       let blob = new Blob([response]); // 这个content是下载的文件内容
                       if ('download' in document.createElement('a')) {
                           let aTag = document.createElement('a');
                           aTag.download = '成员信息未识别.xlsx';
                           aTag.href = URL.createObjectURL(blob);
                           aTag.click();
                           URL.revokeObjectURL(blob);
                           this.buttonLoading=false;
                           this.$notify({
                               type: 'success',
                               title: '文件导出成功',
                               duration:2500,
                               onClose:openNotify.close()
                           });
                       } else { // IE10+下载
                           navigator.msSaveBlob(blob, '成员信息未识别.xlsx')
                           this.buttonLoading=false;
                       }
                   }) */
                this.$api.infoEntryEnteredExportModelGet({
                    method: 'get',
                    url: '/admin/qaStandardRecord/downloadFileNew?targetUrl=' + this.url,
                    responseType: 'blob', // important
                    // headers: { "Content-Type": "multipart/form-data" }
                }).then(res => {
                    const url = window.URL.createObjectURL(new Blob([res]));
                    const link = document.createElement('a');
                    link.href = url;

                    link.setAttribute('download','成员信息未识别.xlsx');

                    document.body.appendChild(link);
                    link.click();
                    openNotify.close()
                });
            },
            parentMethod(name){
                console.log( name)
                if(name.centerDialogVisible==true){
                    this.centerDialogVisible=true
                    this.errmess=name.data
                }else{
                    this.centerVisible=true
                    this.errtwss=name.data
                    this.url=name.url
                }
            },
            // 查询
            queryData(){
                this.pageNum = 1;
                this.getQaStandardRecordFindList();
            },
            // 加载所有工作单位
            getFindListByType() {
                let params = {type:'1010002901'}
                findListByType(params).then(res => {
                    if(res.code == 200){
                        res.data.forEach(v=>{
                            this.asideNav.push(v)
                        })
                    }else {
                        console.log(res)
                    }
                });
            },
            // 加载数据
            getQaStandardRecordFindList() {
                let params = {
                    attr0:this.asideNameActive,
                    pageNum: this.pageNum,
                    pageSize:10,
                    commitStatus:true,
                    name: this.formQuery.name,
                    category: this.formQuery.category,
                    categoryType: this.formQuery.categoryType,
                    technologyCategory: this.formQuery.technologyCategory,
                }
                qaStandardRecordFindList(Qs.stringify(params)).then(res => {
                    if(res.code == 200){
                        console.log(res)
                        this.tableData = res.data.content;
                        this.total = res.data.total;
                        this.totalPages = res.data.totalPages;

                    }else {
                        console.log(res)
                    }
                });
            },
            // 刷新数据
            handleTableRefresh() {
                this.formQuery = {category:'',name:'',categoryTitle:''};
                this.pageNum = 1;
                this.getQaStandardRecordFindList();
            },
            // 实际工作单位
            handleAsideActive(i,name){
                this.asideIndex = i;
                this.asideNameActive = (name=='全部'?'':name);
                this.pageNum = 1;
                this.getQaStandardRecordFindList();
            },
            // 翻页
            handleCurrentPage(e) {
                this.pageNum = e;
                this.getQaStandardRecordFindList(e);
            },
            // 查看详情
            handleClick(e) {
                this.userName = e.name
                this.userId = e.userId;
                this.$refs.infoPreview.$el.style.display = "flex";
            },
            // 点击审核状态触发的函数
            detailClick(e){
                this.$router.push({ path:'/infoDetail'});
            },
            // 点击审核状态触发的函数
            beforeUpload(file){
                // console.log(file,'文件');
                this.files = file;
                const extension = file.name.split('.')[1] === 'xls'
                const extension2 = file.name.split('.')[1] === 'xlsx'
                const isLt5M = file.size / 1024 / 1024 < 5
                if (!extension && !extension2) {
                    this.$message.warning('上传模板只能是 xls、xlsx格式!')
                    return
                }
                if (!isLt5M) {
                    this.$message.warning('上传模板大小不能超过 5MB!')
                    return
                }
                this.fileName = file.name;
                setTimeout(() => {
                    this.submitUpload();
                },500);
                return false; // 返回false不会自动上传
            },

            // 上传excel
            submitUpload() {
                console.log('上传' + this.files.name)
                if(this.fileName == ""){
                    this.$message.warning('请选择要上传的文件！')
                    return false
                }
                // 执行上传excel
                let formData = new FormData;
                formData.append("multipartFiles",this.files);
                var openNotify = this.$notify({
                    type: 'info',
                    title: '文件处理中',
                    //新版本可以识别html代码，升级版本后可打开注释
                    dangerouslyUseHTMLString: true,
                    message:'<div class="progress-bar"></div><div><p style="color:teal">正在火速处理，请耐心等待</p></div>',
                    // showClose:false,
                    /* message:h('div', [
                        h('p',{style: 'color: teal'}, '正在导出，请耐心等待 '),
                     ]),*/
                    duration: 0
                });
                qaStandardRecordUploadPost(formData).then(res => {
                    console.log(res)
                    if(res.data.errors.length>0){
                        this.centerDialogVisible=true;
                    }
                    if(res.data.unrecognizeds.length>0){
                        this.centerVisible=true;
                    }
                    this.errmess = res.data.errors;
                    this.errtwss = res.data.unrecognizeds;
                    this.url=res.data.targetUrl;
                    this.$notify({
                        type: 'success',
                        title: '文件处理完毕',
                        duration:2500,
                        onClose:openNotify.close()
                    });
                    openNotify.close()
                }).finally(function () {

                });
            }
        },
        watch:{
            centerVisible:function (val) {
                if(val==true){
                    let round=1
                    let n=1
                    for(;round<=this.errtwss.length/2;){
                        if(round%2==0){
                            for(n=1;n<=3;n++){
                                let ss=".linall span:nth-child("+n+")"
                                document.querySelector(ss).style.backgroundColor="#F5F8FD"
                            }
                            round++
                        }else{
                            for(n=1;n<=3;n++){
                                let ss=".linall span:nth-child("+n+")"
                                document.querySelector(ss).style.backgroundColor="#ffffff"
                            }
                            round++
                        }
                    }
                }
            }
        },
    }
</script>
<style>
    .pp .el-upload-list{display: none!important;}
    .el-dialog{
        border-radius:15px;
    }
    .el-dialog__header{
        border-radius:15px 15px 0 0;
        background-color: rgb(49,71,143);
    }
    .el-dialog__title{color:#ffffff;}
    .el-dialog--center .el-dialog__body{
        padding:0px!important;
    }
    .dialog-footer .el-button{
        border-radius: 50px;
    }
</style>
<style scoped>
    .line{
        text-align: center;
        border:1px solid #F4F6F7;
        padding:5px;
        width:30%;
        display:inline-block;
    }
    .red{
        color:rgb(255,116,128);
        font-size:14px;
        padding:10px 20px;}
    .lred{color:rgb(255,116,128);font-size:14px;}
    .blname{
        background-color: rgb(245,248,253);
        color:rgb(55,77,146);
        font-size:18px;
        padding:4px;
        margin:5px;
        text-indent: 10px;
    }
    .blname:before{
        content:'';
        display:inline-block;
        background-color:rgb(55,77,146);
        width:3px;
        height: 15px;
        margin-right: 5px;
    }
    .blon{
        color:rgb(55,77,146);
        font-size:18px;
    }
    .detal{
        padding:8px 20px;
    }
    .meiyi{padding-bottom: 5px;}
    .warp {
        height: 100%;
        min-width: 800px;
        display: flex;
        justify-content: space-between;
    }
    .form-query-box {
        height: 50px;
        margin-bottom: 18px;
        position: relative;
        /*overflow: hidden;*/
    }
    .form-query {
        margin-top: 20px;
    }

    .query-bar {
        margin-top: 18px;
        position: absolute;
        right: 30px;
    }

    .query-bar-left {
        margin-top: 18px;
        position: absolute;
        right: 120px;
    }

    .query-bar >>> .el-button {
        width: 80px;
    }
    .content{
        width: 82%;
        min-height: 520px;
        height: 100%;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
        overflow: hidden;
        margin-right: 10px;
        position: relative;
    }
    .content>.background{
        position:absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        width: 100%;
        opacity: 0.08;
    }

    .aside-fr{
        width: 18%;
        min-height: 520px;
        margin-left: 10px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    /*.aside-fr::-webkit-scrollbar {*/
    /*width: 9px;  !* 横向滚动条宽度 *!*/
    /*height: 9px; !* 竖向滚动条宽度 *!*/
    /*background: rgba(0,0,0,.0);*/
    /*border:none;*/
    /*}*/
    /*!* 滚动条 - 滚动块样式 *!*/
    /*.aside-fr::-webkit-scrollbar-thumb {*/
    /*background: rgba(0,0,0,.0);*/
    /*border:none;*/
    /*border-radius:4px*/
    /*}*/
    .aside-fr > div{
        height: 38px;
        line-height: 38px;
        text-align: center;
        color: #999999;
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        font-size: 14px;
    }
    .aside-fr > div.active{
        background: #F5F8FD;
        color: #31478F;
        font-weight: bold;
        position: relative;
    }
    .aside-fr > div.active::before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 38px;
        background: #31478F;
    }
    .refresh-bar{
        text-align: right;
    }
    .refresh-bar p{
        display: inline-block;
        width:44px;
        background:rgba(234,237,244,1);
        border:1px solid rgba(142,165,241,1);
        border-radius:17px;
        text-align: center;
        padding: 1px 0px;
        font-size: 12px;
        color:rgba(47,73,160,1);
        cursor: pointer;
        margin-right: 30px;
    }
    .content-table {
        /* min-height: 410px; */
        margin: 13px 25px;
        border-radius: 5px 5px 0px 0px;
        overflow: hidden;
    }

    .content-table >>> .table-header th {
        background: #E6EAEB !important;
        border: none;
    }
    .content-table >>> .table-header th div{
        font-weight:bold !important;
        color: #333;
    }

    .content-table >>> tbody tr:nth-child(even) td {
        background: #F5F8FE;
    }

    .content-table >>> tbody .el-button {
        padding: 5px 15px;
    }
    .pagination{
        margin-top: 10px;
        text-align: end;
        padding-right: 16px;
    }
    .moduleName{
        background: #31478F;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: bold;
        padding: 11px 0px;
        text-align: center;
        color: white;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .warp >>> .el-table--small,
    .warp >>> .el-button--small{
        font-size: 13px;
    }
    .el-checkbox:last-of-type{
        margin-right: 30px;
    }

    .status{
        color: #31478F;
    }
</style>
